import Taro, { Component } from '@tarojs/taro';
import './index.scss';
import { View } from '@tarojs/components';
import PropsType from 'prop-types';

export default class DTabs extends Component {
  handleClick = (index) => {
    this.props.onClick(index);
  }

  render() {
    return (
      <View className="d-tabs">
        {
          this.props.tabs.map((tab, index) => (
            <View className={['d-tabs__item', this.props.index === tab.value ? 'active' : ''].join(' ')} onClick={() => this.handleClick(tab.value)}>{ tab.name }</View>
          ))
        }
      </View>
    );
  }
}

DTabs.defaultProps = {
  tabs: [],
  index: 0,
  onClick: () => {}
}

DTabs.PropsType = {
  tabs: PropsType.array,
  index: PropsType.number,
  onClick: PropsType.func
}